<template>
  <div class="nav-bar-container">
    <el-row class="header-title">
      <el-col :sm="12" :md="12" :lg="12" :xl="12" class="hidden-xs-only">后台管理平台</el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <RightPanel />
      </el-col>
    </el-row>
    <el-row class="nav-content">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="left-panel">
          <svg-icon :name="collapse ? 'zhankai' : 'shouqi'" @click="handleCollapse" color="#00A2FF" size="16px" class="icon"></svg-icon>
          <template v-if="isBreadcrumb">
            <Breadcrumb />
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
};
</script>

<script setup>
import { defineEmits, computed } from 'vue';
import { useStore } from 'vuex';


const store = useStore();

const collapse = computed(() => {
  return store.getters.collapse;
});

const isBreadcrumb = computed(() => {
  return store.getters['setting/isBreadcrumb'];
});


const emit = defineEmits(['handleCollapse']);

const handleCollapse = () => {
  emit('handleCollapse');
};
</script>

<style lang="scss" scoped>
.nav-bar-container {
  .header-title {
    width: 100%;
    background-color: $base-color-black;
    height: $home-title-height;
    color: $base-color-white;
    font-weight: bold;
    font-size: $base-font-size-big;
    line-height: $home-title-height;
    padding-left: 20px;
  }
  .nav-content {
    height: $base-tag-item-height;
    overflow: hidden;
    user-select: none;
    box-shadow: $base-box-shadow;
  }
  .left-panel {
    display: flex;
    align-items: center;
    justify-items: center;
    height: $base-tag-item-height;
    margin-left: $base-margin-20;
    :deep(.breadcrumb-container) {
      margin-left: $base-margin-15;
    }
    .icon {
      cursor: pointer;
    }
  }
}
</style>
